<template>
  <view class="login">
    <view class="login-box">
      <!-- 测试账号 -->
      <view class="hint">手机号随便，验证码：123456</view>
      <!-- 标题 -->
      <view class="login-text">
        <text>家政平台登录中心</text>
      </view>
      <!-- 登录表单 -->
      <uni-forms ref="form" :modelValue="formData" :rules="rules">
        <uni-forms-item class="lg-user" name="mobile">
          <uni-icons type="phone-filled" size="30"></uni-icons>
          <input class="user-name" type="text" placeholder="请输入手机号" maxlength="11" v-model="formData.mobile">
        </uni-forms-item> 
        <uni-forms-item class="lg-password" name="code">
          <uni-icons type="spinner-cycle" size="30"></uni-icons>
          <input class="user-password" type="text" placeholder="请输入验证码" maxlength="6" v-model="formData.code">
        </uni-forms-item>
      </uni-forms>
      <view class="login-button">
        <button class="lg-btn" type="primary" size="default" @click="login">登录</button>
      </view>
      <!-- 文字 -->
      <view class="mini-text">
        <view class="text">
          <navigator>《用户隐私条款》</navigator>
        </view>
        <view class="icon">|</view>
        <view class="text">
          <navigator>《家政平台隐私条款》</navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        formData:{
          mobile: '',
          code: ''
        },
        rules:{
          mobile:{
            rules:[{
              required: true,
              errorMessage: '手机号不能为空'
            },{
              pattern:'^1[3-9]\\d{9}$',
              errorMessage: '手机号格式不正确'
            }]
          },
          code:{
            rules:[{
              required:true,
              errorMessage:'验证码不能为空'
            },{
              pattern:'^123456$',
              errorMessage:'验证码错误'
            }]
          }
        },
        
      };
    },
    methods: {
      login() {
        this.$refs.form.validate().then(res=>{
          
		  uni.setStorageSync('houseUserInfo',JSON.stringify(this.formData))
          uni.switchTab({
            url:'/pages/my/my'
          })
		  uni.showToast({
		    title:"登录成功",
		    duration:1000
		  })
        }).catch(err=>{
          console.log('表单错误信息',err);
        })
      }
    },
  }
</script>

<style lang="scss">
  .login{

    .login-box{
      position: relative;
      height: 1206rpx;

      background-size: cover;
      overflow: hidden;
      .hint{
        position: absolute;
        bottom: 200rpx;
        left: 160rpx;
        font-size:30rpx
      }
      .uni-forms{
        margin-top: 150rpx;
        padding-left: 150rpx;
      }
      .login-text{
        margin-top: 200rpx;
        text-align: center;
        font-size: 60rpx;
        font-weight: 700;
        color: #212121;
      }
      .lg-user,.lg-password{
        padding: 0 150rpx;
        margin-top: 100rpx;
      }
      .lg-password{
        margin-top: 30rpx;
      }
      .user-name,.user-password{
        margin-left: 20rpx;
        display: inline-block;
        border-bottom: 1rpx solid #000;
        padding-left: 10rpx;
      }
      .login-button{
        margin-top: 200rpx;
        .lg-btn{
          width: 300rpx;
        }
      }
      .mini-text{
        margin-top: 200rpx;
        padding: 0 80rpx;
        display: flex;
        justify-content: space-evenly;
        .text{
          navigator{
            color: cornflowerblue;
          }
        }
      }
    }
  }

</style>
